<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <title>汽车仪表盘 - 欢迎来到SY的博客</title><meta name="description" content="汽车仪表盘"><meta property="og:title" content="汽车仪表盘" />
<meta property="og:description" content="汽车仪表盘" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" /><meta property="og:image" content="https://acking-you.gitee.io/logo.png"/><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2022-08-30T00:00:00+00:00" />
<meta property="article:modified_time" content="2022-08-30T00:00:00+00:00" />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://acking-you.gitee.io/logo.png"/>

<meta name="twitter:title" content="汽车仪表盘"/>
<meta name="twitter:description" content="汽车仪表盘"/>
<meta name="application-name" content="FeelIt">
<meta name="apple-mobile-web-app-title" content="FeelIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="canonical" href="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" /><link rel="prev" href="https://acking-you.gitee.io/posts/%C3%A5%C3%A7-%C3%A5%C3%A5%C2%BA%C3%A5%C2%BA/" /><link rel="next" href="https://acking-you.gitee.io/posts/%C3%A5%C3%A7%C2%BA%C3%A6%C3%A5-%C3%A5%C3%A8%C2%AA%C3%A6-/" /><link rel="stylesheet" href="/css/page.min.css"><link rel="stylesheet" href="/css/home.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "汽车仪表盘",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/acking-you.gitee.io\/posts\/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7\/"
        },"genre": "posts","keywords": "汽车仪表盘","wordcount":  1771 ,
        "url": "https:\/\/acking-you.gitee.io\/posts\/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7\/","datePublished": "2022-08-30T00:00:00+00:00","dateModified": "2022-08-30T00:00:00+00:00","publisher": {
            "@type": "Organization",
            "name": "作者"},"author": {
                "@type": "Person",
                "name": "作者"
            },"description": "汽车仪表盘"
    }
    </script></head><body data-header-desktop="auto" data-header-mobile="auto"><script>(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="欢迎来到SY的博客">欢迎来到SY的博客</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 文章 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><span class="menu-item delimiter"></span><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-desktop">
                        <a href="#" class="search-button search-toggle" id="search-toggle-desktop" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="#" class="search-button search-clear" id="search-clear-desktop" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="欢迎来到SY的博客">欢迎来到SY的博客</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="搜索文章标题或内容..." id="search-input-mobile">
                        <a href="#" class="search-button search-toggle" id="search-toggle-mobile" title="搜索">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="#" class="search-button search-clear" id="search-clear-mobile" title="清空">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </div>
                    <a href="#" class="search-cancel" id="search-cancel-mobile">
                        取消
                    </a>
                </div><a class="menu-item" href="/posts/" title="">文章</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><div class="menu-item"><a href="javascript:void(0);" class="theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div></div>
    </div>
</header><div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single" data-toc="disable"><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://w.wallhaven.cc/full/4g/wallhaven-4g2zx3.jpg"
        data-srcset="https://w.wallhaven.cc/full/4g/wallhaven-4g2zx3.jpg, https://w.wallhaven.cc/full/4g/wallhaven-4g2zx3.jpg 1.5x, https://w.wallhaven.cc/full/4g/wallhaven-4g2zx3.jpg 2x"
        data-sizes="auto"
        alt="https://w.wallhaven.cc/full/4g/wallhaven-4g2zx3.jpg"
        title="汽车仪表盘" /></div><div class="single-card" data-image="true"><h2 class="single-title animated flipInX">汽车仪表盘</h2><div class="post-meta">
                <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>作者</a></span>&nbsp;<span class="post-category">出版于  <a href="/categories/qtwidget%E8%87%AA%E7%BB%98%E6%8E%A7%E4%BB%B6/"><i class="far fa-folder fa-fw"></i>QtWidget自绘控件</a></span></div>
                <div class="post-meta-line"><span><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2022-08-30">2022-08-30</time></span>&nbsp;<span><i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 1771 字</span>&nbsp;
                    <span><i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 4 分钟</span>&nbsp;</div>
            </div>
            
            <hr><div class="details toc" id="toc-static"  data-kept="">
                    <div class="details-summary toc-title">
                        <span>目录</span>
                        <span><i class="details-icon fas fa-angle-right"></i></span>
                    </div>
                    <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#1汽车仪表盘效果图">1、汽车仪表盘效果图</a></li>
    <li><a href="#2绘制前的准备">2、绘制前的准备</a></li>
    <li><a href="#3绘制刻度线">3、绘制刻度线</a></li>
    <li><a href="#4刻度数字">4、刻度数字</a></li>
    <li><a href="#5绘制发光的圆圈">5、绘制发光的圆圈</a></li>
    <li><a href="#6绘制指针">6、绘制指针</a></li>
    <li><a href="#7绘制中间大圆小圆以及发光内圈">7、绘制中间大圆、小圆以及发光内圈</a></li>
    <li><a href="#8绘制单位和时速">8、绘制单位和时速</a></li>
    <li><a href="#9键盘事件和鼠标事件控制车速">9、键盘事件和鼠标事件控制车速</a></li>
    <li><a href="#10代码获取">10、代码获取</a></li>
  </ul>
</nav></div>
                </div><div class="content" id="content"><h2 id="1汽车仪表盘效果图">1、汽车仪表盘效果图</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301516841.png"
        data-srcset="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301516841.png, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301516841.png 1.5x, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301516841.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301516841.png"
        title="image-20220830151624760" /></p>
<p>上面是通过QPainter绘制出来的汽车仪表盘，可能与真实的汽车仪表盘有些差距，但总体来说还可以吧，下面将会详细讲解如何绘制汽车仪表盘。</p>
<h2 id="2绘制前的准备">2、绘制前的准备</h2>
<p>首先我们将窗体背景设置为偏黑色，这样方便我们后续观察效果，以及将窗口固定位1280*800，代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP">    <span class="k">this</span><span class="o">-&gt;</span><span class="n">setFixedSize</span><span class="p">(</span><span class="mi">1280</span><span class="p">,</span><span class="mi">800</span><span class="p">);</span>
    <span class="n">QPalette</span> <span class="n">pale</span><span class="o">=</span><span class="k">this</span><span class="o">-&gt;</span><span class="n">palette</span><span class="p">();</span>
    <span class="n">pale</span><span class="p">.</span><span class="n">setBrush</span><span class="p">(</span><span class="n">QPalette</span><span class="o">::</span><span class="n">Window</span><span class="p">,</span><span class="n">QBrush</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">40</span><span class="p">,</span><span class="mi">40</span><span class="p">,</span><span class="mi">40</span><span class="p">)));</span>
    <span class="k">this</span><span class="o">-&gt;</span><span class="n">setPalette</span><span class="p">(</span><span class="n">pale</span><span class="p">);</span>
</code></pre></div><p>效果如下：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301439671.png"
        data-srcset="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301439671.png, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301439671.png 1.5x, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301439671.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301439671.png"
        title="image-20220830143915607" /></p>
<h2 id="3绘制刻度线">3、绘制刻度线</h2>
<p>首先我们要获取仪表盘的中心点radius以及仪表盘的宽高，然后将画笔移动到窗口的中下方，移动画笔也就是移动坐标系。</p>
<p>然后使用QPainter中的抗锯齿的方法，代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP">	<span class="n">QPainter</span> <span class="nf">painter</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
    <span class="kt">int</span> <span class="n">width</span><span class="o">=</span><span class="k">this</span><span class="o">-&gt;</span><span class="n">width</span><span class="p">();</span>
    <span class="c1">//仪表盘高度
</span><span class="c1"></span>    <span class="kt">int</span> <span class="n">height</span><span class="o">=</span><span class="k">this</span><span class="o">-&gt;</span><span class="n">height</span><span class="p">()</span><span class="o">-</span><span class="mi">100</span><span class="p">;</span>
    <span class="c1">//仪表盘中心位置
</span><span class="c1"></span>    <span class="kt">int</span> <span class="n">radius</span><span class="o">=</span><span class="p">((</span><span class="n">width</span><span class="o">&gt;</span><span class="n">height</span><span class="p">)</span><span class="o">?</span> <span class="nl">height</span><span class="p">:</span><span class="n">width</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="p">;</span>
    <span class="c1">//移动画笔到中下方
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">translate</span><span class="p">(</span><span class="n">width</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span><span class="n">height</span><span class="o">*</span><span class="mf">0.6</span><span class="p">);</span>
    <span class="c1">//启用反锯齿
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">setRenderHint</span><span class="p">(</span><span class="n">QPainter</span><span class="o">::</span><span class="n">Antialiasing</span><span class="p">,</span><span class="nb">true</span><span class="p">);</span>
</code></pre></div><p>接下来就是画刻度线，首先我们要组装刻度点的路径，使用QPainterPath。然后是绘制长的刻度线，大于或者等于160的刻度值为红色，其他的刻度线为白色，代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="c1">//画刻度线
</span><span class="c1"></span><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawSmallScale</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span><span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="c1">//组装点的路径图
</span><span class="c1"></span>    <span class="n">QPainterPath</span> <span class="n">pointPath_small</span><span class="p">;</span>
    <span class="n">pointPath_small</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
    <span class="n">pointPath_small</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
    <span class="n">pointPath_small</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="mi">8</span><span class="p">);</span>
    <span class="n">pointPath_small</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span><span class="mi">8</span><span class="p">);</span>


    <span class="n">QPainterPath</span> <span class="n">pointPath_big</span><span class="p">;</span>
    <span class="n">pointPath_big</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
    <span class="n">pointPath_big</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
    <span class="n">pointPath_big</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="mi">20</span><span class="p">);</span>
    <span class="n">pointPath_big</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span><span class="mi">20</span><span class="p">);</span>

    <span class="c1">//绘制121个小点
</span><span class="c1"></span>    <span class="k">for</span><span class="p">(</span><span class="kt">int</span> <span class="n">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="n">i</span><span class="o">&lt;</span><span class="mi">121</span><span class="p">;</span><span class="n">i</span><span class="o">+=</span><span class="mi">2</span><span class="p">){</span>
        <span class="n">QPointF</span> <span class="nf">point</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>
        <span class="n">point</span><span class="p">.</span><span class="n">setX</span><span class="p">(</span><span class="n">radius</span><span class="o">*</span><span class="n">qCos</span><span class="p">(((</span><span class="mi">210</span><span class="o">-</span><span class="n">i</span><span class="o">*</span><span class="mi">2</span><span class="p">)</span><span class="o">*</span><span class="n">M_PI</span><span class="p">)</span><span class="o">/</span><span class="mi">180</span><span class="p">));</span>
        <span class="n">point</span><span class="p">.</span><span class="n">setY</span><span class="p">(</span><span class="n">radius</span><span class="o">*</span><span class="n">qSin</span><span class="p">(((</span><span class="mi">210</span><span class="o">-</span><span class="n">i</span><span class="o">*</span><span class="mi">2</span><span class="p">)</span><span class="o">*</span><span class="n">M_PI</span><span class="p">)</span><span class="o">/</span><span class="mi">180</span><span class="p">));</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">translate</span><span class="p">(</span><span class="n">point</span><span class="p">.</span><span class="n">x</span><span class="p">(),</span><span class="o">-</span><span class="n">point</span><span class="p">.</span><span class="n">y</span><span class="p">());</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">rotate</span><span class="p">(</span><span class="o">-</span><span class="mi">120</span><span class="o">+</span><span class="n">i</span><span class="o">*</span><span class="mi">2</span><span class="p">);</span>

        <span class="k">if</span><span class="p">(</span><span class="n">i</span><span class="o">&lt;</span><span class="mi">80</span><span class="p">)</span>
        <span class="p">{</span>
            <span class="n">painter</span><span class="p">.</span><span class="n">setBrush</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">));</span>
        <span class="p">}</span>
        <span class="k">if</span><span class="p">(</span><span class="n">i</span><span class="o">&gt;=</span><span class="mi">80</span><span class="p">)</span>
        <span class="p">{</span>
            <span class="n">painter</span><span class="p">.</span><span class="n">setBrush</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">235</span><span class="p">,</span><span class="mi">70</span><span class="p">,</span><span class="mi">70</span><span class="p">));</span>
        <span class="p">}</span>

        <span class="k">if</span><span class="p">(</span><span class="n">i</span><span class="o">%</span><span class="mi">5</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span>
        <span class="p">{</span>
            <span class="n">painter</span><span class="p">.</span><span class="n">drawPath</span><span class="p">(</span><span class="n">pointPath_big</span><span class="p">);</span><span class="c1">//绘画大刻度
</span><span class="c1"></span>        <span class="p">}</span><span class="k">else</span>
        <span class="p">{</span>
            <span class="n">painter</span><span class="p">.</span><span class="n">drawPath</span><span class="p">(</span><span class="n">pointPath_small</span><span class="p">);</span><span class="c1">//绘画小刻度
</span><span class="c1"></span>        <span class="p">}</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div><p>效果如下：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301452519.png"
        data-srcset="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301452519.png, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301452519.png 1.5x, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301452519.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301452519.png"
        title="image-20220830145212461" /></p>
<h2 id="4刻度数字">4、刻度数字</h2>
<p>在每一个更长的刻度线上绘制对应的数字，我们要找到对应的坐标，还要设置数字的字体以及大小，而且我们还要旋转画笔，让每个对应的数字都是在正确的位置，通过角度旋转的角度来计算弧度，然后通过弧度来获取对应的坐标，代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="c1">//刻度数字
</span><span class="c1"></span><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawDigital</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span><span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="c1">//设置画笔，画笔默认NOPEN
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">setPen</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">));</span>
    <span class="n">QFont</span> <span class="n">font</span><span class="p">;</span>
    <span class="n">font</span><span class="p">.</span><span class="n">setFamily</span><span class="p">(</span><span class="s">&#34;Arial&#34;</span><span class="p">);</span>
    <span class="n">font</span><span class="p">.</span><span class="n">setPointSize</span><span class="p">(</span><span class="mi">15</span><span class="p">);</span>
    <span class="n">font</span><span class="p">.</span><span class="n">setBold</span><span class="p">(</span><span class="nb">true</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">setFont</span><span class="p">(</span><span class="n">font</span><span class="p">);</span>
    <span class="k">for</span><span class="p">(</span><span class="kt">int</span> <span class="n">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="n">i</span><span class="o">&lt;</span><span class="mi">13</span><span class="p">;</span><span class="o">++</span><span class="n">i</span><span class="p">){</span>
        <span class="n">QPointF</span> <span class="nf">point</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>
        <span class="n">point</span><span class="p">.</span><span class="n">setX</span><span class="p">(</span><span class="n">radius</span><span class="o">*</span><span class="n">qCos</span><span class="p">(((</span><span class="mi">210</span><span class="o">-</span><span class="n">i</span><span class="o">*</span><span class="mi">20</span><span class="p">)</span><span class="o">*</span><span class="n">M_PI</span><span class="p">)</span><span class="o">/</span><span class="mi">180</span><span class="p">));</span>
        <span class="n">point</span><span class="p">.</span><span class="n">setY</span><span class="p">(</span><span class="n">radius</span><span class="o">*</span><span class="n">qSin</span><span class="p">(((</span><span class="mi">210</span><span class="o">-</span><span class="n">i</span><span class="o">*</span><span class="mi">20</span><span class="p">)</span><span class="o">*</span><span class="n">M_PI</span><span class="p">)</span><span class="o">/</span><span class="mi">180</span><span class="p">));</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">translate</span><span class="p">(</span><span class="n">point</span><span class="p">.</span><span class="n">x</span><span class="p">(),</span><span class="o">-</span><span class="n">point</span><span class="p">.</span><span class="n">y</span><span class="p">());</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">rotate</span><span class="p">(</span><span class="o">-</span><span class="mi">120</span><span class="o">+</span><span class="n">i</span><span class="o">*</span><span class="mi">20</span><span class="p">);</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">drawText</span><span class="p">(</span><span class="o">-</span><span class="mi">25</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span><span class="n">Qt</span><span class="o">::</span><span class="n">AlignCenter</span><span class="p">,</span><span class="n">QString</span><span class="o">::</span><span class="n">number</span><span class="p">(</span><span class="n">i</span><span class="o">*</span><span class="mi">20</span><span class="p">));</span>
        <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
    <span class="p">}</span>
    <span class="c1">//还原画笔
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">setPen</span><span class="p">(</span><span class="n">Qt</span><span class="o">::</span><span class="n">NoPen</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div><p>效果如下：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301459646.png"
        data-srcset="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301459646.png, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301459646.png 1.5x, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301459646.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301459646.png"
        title="image-20220830145901581" /></p>
<h2 id="5绘制发光的圆圈">5、绘制发光的圆圈</h2>
<p>在刻度线的四周绘制一种渐变色的发光圆圈，首先我们要创建大小圆的弧圈，通过arcTo方法，然后在小圆中绘制椭圆，通过addEllipse，然后通过QRadialGradient设置渐变色，最后通过drawPath方法获取大圆减小圆之后的路径，代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawCircle</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span><span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="c1">//保存绘图对象
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>
    <span class="c1">//计算大小圆路径
</span><span class="c1"></span>    <span class="n">QPainterPath</span> <span class="n">outRing</span><span class="p">;</span>
    <span class="n">QPainterPath</span> <span class="n">inRing</span><span class="p">;</span>
    <span class="n">outRing</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="n">inRing</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="n">outRing</span><span class="p">.</span><span class="n">arcTo</span><span class="p">(</span><span class="o">-</span><span class="n">radius</span><span class="p">,</span><span class="o">-</span><span class="n">radius</span><span class="p">,</span> <span class="mi">2</span><span class="o">*</span><span class="n">radius</span><span class="p">,</span><span class="mi">2</span><span class="o">*</span><span class="n">radius</span><span class="p">,</span><span class="o">-</span><span class="mi">30</span><span class="p">,</span><span class="mi">240</span><span class="p">);</span>
    <span class="n">inRing</span><span class="p">.</span><span class="n">addEllipse</span><span class="p">(</span><span class="o">-</span><span class="n">radius</span><span class="o">+</span><span class="mi">50</span><span class="p">,</span><span class="o">-</span><span class="n">radius</span> <span class="o">+</span> <span class="mi">50</span><span class="p">,</span><span class="mi">2</span><span class="o">*</span><span class="p">(</span><span class="n">radius</span><span class="o">-</span><span class="mi">50</span><span class="p">),</span><span class="mi">2</span><span class="o">*</span><span class="p">(</span><span class="n">radius</span><span class="o">-</span><span class="mi">50</span><span class="p">));</span>
    <span class="n">outRing</span><span class="p">.</span><span class="n">closeSubpath</span><span class="p">();</span>
    <span class="c1">//设置渐变色k
</span><span class="c1"></span>    <span class="n">QRadialGradient</span> <span class="nf">radialGradient</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="n">radius</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="n">radialGradient</span><span class="p">.</span><span class="n">setColorAt</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="n">QColor</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">82</span><span class="p">,</span><span class="mi">230</span><span class="p">));</span>
    <span class="n">radialGradient</span><span class="p">.</span><span class="n">setColorAt</span><span class="p">(</span><span class="mf">0.9</span><span class="p">,</span><span class="n">Qt</span><span class="o">::</span><span class="n">transparent</span><span class="p">);</span>
    <span class="c1">//设置画刷
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">setBrush</span><span class="p">(</span><span class="n">radialGradient</span><span class="p">);</span>
    <span class="c1">//大圆减小圆
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">drawPath</span><span class="p">(</span><span class="n">outRing</span><span class="p">.</span><span class="n">subtracted</span><span class="p">(</span><span class="n">inRing</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div><p>效果图如下：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301504164.png"
        data-srcset="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301504164.png, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301504164.png 1.5x, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301504164.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301504164.png"
        title="image-20220830150437094" /></p>
<h2 id="6绘制指针">6、绘制指针</h2>
<p>和之前一样我们要组装点的路径，然后是计算点的坐标，这些都可以自己慢慢的试试，代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawPointer</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span><span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="c1">//组装点的路径图
</span><span class="c1"></span>    <span class="n">QPainterPath</span> <span class="n">pointPath</span><span class="p">;</span>
    <span class="n">pointPath</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="n">pointPath</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="o">-</span><span class="n">radius</span><span class="p">);</span>
    <span class="n">pointPath</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span><span class="o">-</span><span class="n">radius</span><span class="p">);</span>
    <span class="n">pointPath</span><span class="p">.</span><span class="n">lineTo</span><span class="p">(</span><span class="o">-</span><span class="mi">10</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="n">pointPath</span><span class="p">.</span><span class="n">arcTo</span><span class="p">(</span><span class="o">-</span><span class="mi">10</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">20</span><span class="p">,</span><span class="mi">20</span><span class="p">,</span><span class="mi">180</span><span class="p">,</span><span class="mi">180</span><span class="p">);</span>
    <span class="n">QPainterPath</span> <span class="n">inRing</span><span class="p">;</span>
    <span class="n">inRing</span><span class="p">.</span><span class="n">addEllipse</span><span class="p">(</span><span class="o">-</span><span class="mi">5</span><span class="p">,</span><span class="o">-</span><span class="mi">5</span><span class="p">,</span><span class="mi">10</span><span class="p">,</span><span class="mi">10</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>

    <span class="c1">//计算并选择绘图对象坐标
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">rotate</span><span class="p">(</span><span class="n">degRotate</span> <span class="o">-</span> <span class="mi">120</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">setBrush</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">drawPath</span><span class="p">(</span><span class="n">pointPath</span><span class="p">.</span><span class="n">subtracted</span><span class="p">(</span><span class="n">inRing</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div><p>效果图：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301508886.png"
        data-srcset="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301508886.png, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301508886.png 1.5x, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301508886.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301508886.png"
        title="image-20220830150828813" /></p>
<h2 id="7绘制中间大圆小圆以及发光内圈">7、绘制中间大圆、小圆以及发光内圈</h2>
<p>绘制大圆的代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawCircle_bom_big</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span><span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="c1">//保存绘图对象
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>
    <span class="c1">//计算大小圆路径
</span><span class="c1"></span>    <span class="n">QPainterPath</span> <span class="n">inRing</span><span class="p">;</span>
    <span class="n">inRing</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="n">inRing</span><span class="p">.</span><span class="n">addEllipse</span><span class="p">(</span><span class="o">-</span><span class="n">radius</span><span class="o">+</span><span class="mi">50</span><span class="p">,</span><span class="o">-</span><span class="n">radius</span> <span class="o">+</span> <span class="mi">50</span><span class="p">,</span><span class="mi">2</span><span class="o">*</span><span class="p">(</span><span class="n">radius</span><span class="o">-</span><span class="mi">50</span><span class="p">),</span><span class="mi">2</span><span class="o">*</span><span class="p">(</span><span class="n">radius</span><span class="o">-</span><span class="mi">50</span><span class="p">));</span>
    <span class="c1">//设置画刷
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">setBrush</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">20</span><span class="p">,</span><span class="mi">30</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">drawPath</span><span class="p">(</span><span class="n">inRing</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div><p>绘制小圆的代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawCircle_bom_small</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span><span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="c1">//保存绘图对象
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>
    <span class="c1">//计算大小圆路径
</span><span class="c1"></span>    <span class="n">QPainterPath</span> <span class="n">inRing</span><span class="p">;</span>
    <span class="n">inRing</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="n">inRing</span><span class="p">.</span><span class="n">addEllipse</span><span class="p">(</span><span class="o">-</span><span class="n">radius</span><span class="o">+</span><span class="mi">50</span><span class="p">,</span><span class="o">-</span><span class="n">radius</span> <span class="o">+</span> <span class="mi">50</span><span class="p">,</span><span class="mi">2</span><span class="o">*</span><span class="p">(</span><span class="n">radius</span><span class="o">-</span><span class="mi">50</span><span class="p">),</span><span class="mi">2</span><span class="o">*</span><span class="p">(</span><span class="n">radius</span><span class="o">-</span><span class="mi">50</span><span class="p">));</span>
    <span class="c1">//设置画刷
</span><span class="c1"></span>    <span class="n">painter</span><span class="p">.</span><span class="n">setBrush</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">20</span><span class="p">,</span><span class="mi">30</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">drawPath</span><span class="p">(</span><span class="n">inRing</span><span class="p">);</span>

    <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div><p>绘制发光内圈的代码：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawCircle_bom_shine</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span><span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>
    <span class="n">QRadialGradient</span> <span class="nf">radialGradient</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="n">radius</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
    <span class="c1">//    radialGradient.setColorAt(0.5,QColor(8,77,197));
</span><span class="c1"></span>    <span class="n">radialGradient</span><span class="p">.</span><span class="n">setColorAt</span><span class="p">(</span><span class="mf">0.5</span><span class="p">,</span><span class="n">QColor</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">68</span><span class="p">,</span><span class="mi">185</span><span class="p">,</span><span class="mi">150</span><span class="p">));</span>
    <span class="n">radialGradient</span><span class="p">.</span><span class="n">setColorAt</span><span class="p">(</span><span class="mf">1.0</span><span class="p">,</span><span class="n">Qt</span><span class="o">::</span><span class="n">transparent</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">setBrush</span><span class="p">(</span><span class="n">QBrush</span><span class="p">(</span><span class="n">radialGradient</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">drawRect</span><span class="p">(</span><span class="o">-</span><span class="n">radius</span><span class="p">,</span><span class="o">-</span><span class="n">radius</span><span class="p">,</span><span class="mi">2</span><span class="o">*</span><span class="p">(</span><span class="n">radius</span><span class="p">),</span><span class="mi">2</span><span class="o">*</span><span class="p">(</span><span class="n">radius</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div><p>总体效果图：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301513631.png"
        data-srcset="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301513631.png, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301513631.png 1.5x, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301513631.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301513631.png"
        title="image-20220830151303554" /></p>
<h2 id="8绘制单位和时速">8、绘制单位和时速</h2>
<p>绘制速度单位的代码：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawUnit</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span> <span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">setPen</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">));</span>
    <span class="n">QFont</span> <span class="n">font</span><span class="p">;</span>
    <span class="n">font</span><span class="p">.</span><span class="n">setFamily</span><span class="p">(</span><span class="s">&#34;Arial&#34;</span><span class="p">);</span>
    <span class="n">font</span><span class="p">.</span><span class="n">setPointSize</span><span class="p">(</span><span class="mi">16</span><span class="p">);</span>
    <span class="n">font</span><span class="p">.</span><span class="n">setBold</span><span class="p">(</span><span class="nb">true</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">setFont</span><span class="p">(</span><span class="n">font</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">drawText</span><span class="p">(</span><span class="o">-</span><span class="mi">50</span><span class="p">,</span> <span class="o">-</span><span class="n">radius</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span><span class="n">Qt</span><span class="o">::</span><span class="n">AlignCenter</span><span class="p">,</span><span class="n">QString</span><span class="p">(</span><span class="s">&#34;km/h&#34;</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">drawText</span><span class="p">(</span><span class="o">-</span><span class="mi">60</span><span class="p">,</span> <span class="o">-</span><span class="n">radius</span> <span class="o">+</span> <span class="mi">130</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span><span class="n">Qt</span><span class="o">::</span><span class="n">AlignCenter</span><span class="p">,</span><span class="n">QString</span><span class="p">(</span><span class="s">&#34;当前车速&#34;</span><span class="p">));</span>

    <span class="n">painter</span><span class="p">.</span><span class="n">setPen</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">50</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">drawText</span><span class="p">(</span><span class="o">-</span><span class="mi">120</span><span class="p">,</span> <span class="o">-</span><span class="n">radius</span> <span class="o">+</span> <span class="mi">280</span><span class="p">,</span> <span class="mi">250</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span><span class="n">Qt</span><span class="o">::</span><span class="n">AlignCenter</span><span class="p">,</span><span class="n">QString</span><span class="p">(</span><span class="s">&#34;-请按space键加速-&#34;</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div><p>绘制时速的代码：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">DrawNum</span><span class="p">(</span><span class="n">QPainter</span> <span class="o">&amp;</span> <span class="n">painter</span><span class="p">,</span> <span class="kt">int</span> <span class="n">radius</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">save</span><span class="p">();</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">setPen</span><span class="p">(</span><span class="n">QColor</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">,</span><span class="mi">255</span><span class="p">));</span>
    <span class="n">QFont</span> <span class="n">font</span><span class="p">;</span>
    <span class="n">font</span><span class="p">.</span><span class="n">setFamily</span><span class="p">(</span><span class="s">&#34;Arial&#34;</span><span class="p">);</span>
    <span class="n">font</span><span class="p">.</span><span class="n">setPointSize</span><span class="p">(</span><span class="mi">45</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">setFont</span><span class="p">(</span><span class="n">font</span><span class="p">);</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">drawText</span><span class="p">(</span><span class="o">-</span><span class="mi">75</span><span class="p">,</span> <span class="o">-</span><span class="n">radius</span> <span class="o">-</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">150</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span><span class="n">Qt</span><span class="o">::</span><span class="n">AlignCenter</span><span class="p">,</span><span class="n">QString</span><span class="o">::</span><span class="n">number</span><span class="p">(</span><span class="n">degRotate</span><span class="p">));</span>
    <span class="n">painter</span><span class="p">.</span><span class="n">restore</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div><p>效果图：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301515543.png"
        data-srcset="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301515543.png, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301515543.png 1.5x, https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301515543.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/jjking20010901/typora/master/img202208301515543.png"
        title="image-20220830151543465" /></p>
<h2 id="9键盘事件和鼠标事件控制车速">9、键盘事件和鼠标事件控制车速</h2>
<p>首先我们需要定义一个定时器timer，然后先将以下键盘事件，我们定义一个direction和degRotate，direction为0时代表减速或者车速为0，为1代表加速，degRotate代表车速，一开始为0。</p>
<p>当我们按下空格键时，定时器开始，同样的direction变为1，当定时器超时的时候，执行槽函数speed_changed。</p>
<p>下面是键盘按下事件的代码：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">keyPressEvent</span><span class="p">(</span><span class="n">QKeyEvent</span> <span class="o">*</span><span class="n">event</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">event</span><span class="o">-&gt;</span><span class="n">key</span><span class="p">()</span><span class="o">==</span><span class="n">Qt</span><span class="o">::</span><span class="n">Key_Space</span><span class="p">)</span>
    <span class="p">{</span>
        <span class="k">if</span><span class="p">(</span><span class="n">direction</span><span class="o">==</span><span class="mi">0</span><span class="p">)</span>
        <span class="p">{</span>
            <span class="n">timer</span><span class="o">-&gt;</span><span class="n">start</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
            <span class="n">direction</span><span class="o">=</span><span class="mi">1</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div><p>下面是槽函数speed_changed的代码：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">speed_changed</span><span class="p">()</span>
<span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">direction</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span><span class="c1">//加速
</span><span class="c1"></span>    <span class="p">{</span>
        <span class="n">degRotate</span><span class="o">++</span><span class="p">;</span>
        <span class="k">if</span><span class="p">(</span><span class="n">degRotate</span> <span class="o">&gt;</span> <span class="mi">240</span><span class="p">)</span>
            <span class="n">degRotate</span> <span class="o">=</span> <span class="mi">240</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="nf">if</span><span class="p">(</span><span class="n">direction</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span><span class="c1">//减速
</span><span class="c1"></span>    <span class="p">{</span>
        <span class="n">degRotate</span><span class="o">--</span><span class="p">;</span>
        <span class="k">if</span><span class="p">(</span><span class="n">degRotate</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span>
        <span class="p">{</span>
            <span class="n">degRotate</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="n">timer</span><span class="o">-&gt;</span><span class="n">stop</span><span class="p">();</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="n">update</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div><p>当我们松开空格键时，direction为0，开始减速。代码如下：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">keyReleaseEvent</span><span class="p">(</span><span class="n">QKeyEvent</span> <span class="o">*</span><span class="n">event</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">event</span><span class="o">-&gt;</span><span class="n">key</span><span class="p">()</span><span class="o">==</span><span class="n">Qt</span><span class="o">::</span><span class="n">Key_Space</span><span class="p">)</span>
    <span class="p">{</span>
        <span class="n">direction</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div><p>接下来是鼠标点击事件和鼠标松开事件，当我们点击鼠标时，车速增加，松开时车速减少。</p>
<p>鼠标点击事件代码：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">mousePressEvent</span><span class="p">(</span><span class="n">QMouseEvent</span> <span class="o">*</span><span class="n">event</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">event</span><span class="o">-&gt;</span><span class="n">button</span><span class="p">()</span><span class="o">==</span><span class="n">Qt</span><span class="o">::</span><span class="n">LeftButton</span><span class="p">)</span>
    <span class="p">{</span>
        <span class="k">if</span><span class="p">(</span><span class="n">direction</span><span class="o">==</span><span class="mi">0</span><span class="p">)</span>
        <span class="p">{</span>
            <span class="n">is_Pressed</span><span class="o">=</span><span class="nb">true</span><span class="p">;</span>
            <span class="n">timer</span><span class="o">-&gt;</span><span class="n">start</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
            <span class="n">direction</span><span class="o">=</span><span class="mi">1</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div><p>鼠标松开事件代码：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-CPP" data-lang="CPP"><span class="kt">void</span> <span class="n">Widget</span><span class="o">::</span><span class="n">mouseReleaseEvent</span><span class="p">(</span><span class="n">QMouseEvent</span> <span class="o">*</span><span class="n">event</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">Q_UNUSED</span><span class="p">(</span><span class="n">event</span><span class="p">);</span>
    <span class="n">is_Pressed</span><span class="o">=</span><span class="nb">false</span><span class="p">;</span>
    <span class="n">direction</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div><h2 id="10代码获取">10、代码获取</h2>
<p>我已经将代码推送到了gitee上面了，想要源码的可以通过下方链接获取：</p>
<p><a href="https://gitee.com/GoodNightZoe/car-board.git" target="_blank" rel="noopener noreffer">汽车仪表盘</a></p>
</div><div class="post-footer" id="post-footer">
    <div class="post-info"><div class="post-info-tag"><span><a href="/tags/%E6%B1%BD%E8%BD%A6%E4%BB%AA%E8%A1%A8%E7%9B%98/">汽车仪表盘</a>
                </span></div><div class="post-info-line"><div class="post-info-mod">
                <span>更新于 2022-08-30</span>
            </div><div class="post-info-mod"></div>
        </div><div class="post-info-share">
            <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" data-title="汽车仪表盘" data-hashtags="汽车仪表盘"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" data-hashtag="汽车仪表盘"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 WhatsApp" data-sharer="whatsapp" data-url="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" data-title="汽车仪表盘" data-web><i class="fab fa-whatsapp fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" data-title="汽车仪表盘"><i class="fab fa-line fa-fw"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" data-title="汽车仪表盘" data-image="https://w.wallhaven.cc/full/4g/wallhaven-4g2zx3.jpg"><i class="fab fa-weibo fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Myspace" data-sharer="myspace" data-url="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" data-title="汽车仪表盘" data-description="汽车仪表盘"><i data-svg-src="/lib/simple-icons/icons/myspace.min.svg"></i></a><a href="javascript:void(0);" title="分享到 Blogger" data-sharer="blogger" data-url="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" data-title="汽车仪表盘" data-description="汽车仪表盘"><i class="fab fa-blogger fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Evernote" data-sharer="evernote" data-url="https://acking-you.gitee.io/posts/%C3%A6%C3%A8%C3%A4%C2%AA%C3%A8%C3%A7/" data-title="汽车仪表盘"><i class="fab fa-evernote fa-fw"></i></a></span>
        </div></div><div class="post-nav"><a href="/posts/%C3%A5%C3%A7-%C3%A5%C3%A5%C2%BA%C3%A5%C2%BA/" class="prev" rel="prev" title="像素刻度尺"><i class="fas fa-angle-left fa-fw"></i>Previous Post</a>
            <a href="/posts/%C3%A5%C3%A7%C2%BA%C3%A6%C3%A5-%C3%A5%C3%A8%C2%AA%C3%A6-/" class="next" rel="next" title="多级折叠导航栏">Next Post<i class="fas fa-angle-right fa-fw"></i></a></div></div>
</div></article></div>
            </main>
            <footer class="footer"><div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.86.0">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/khusika/FeelIt" target="_blank" rel="noopener noreffer" title="FeelIt 1.0.1"><i class="fas fa-hand-holding-heart fa-fw"></i> FeelIt</a>
        </div><div class="footer-line" itemscope itemtype="http://schema.org/CreativeWork"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2022</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/"></a></span></div>
</div>
</footer>
        </div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-chevron-up fa-fw"></i>
            </a></div><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><link rel="stylesheet" href="/lib/katex/katex.min.css"><link rel="stylesheet" href="/lib/katex/copy-tex.min.css"><script src="/lib/autocomplete/autocomplete.min.js"></script><script src="/lib/lunr/lunr.min.js"></script><script src="/lib/lunr/lunr.stemmer.support.min.js"></script><script src="/lib/lunr/lunr.zh.min.js"></script><script src="/lib/lazysizes/lazysizes.min.js"></script><script src="/lib/clipboard/clipboard.min.js"></script><script src="/lib/sharer/sharer.min.js"></script><script src="/lib/katex/katex.min.js"></script><script src="/lib/katex/auto-render.min.js"></script><script src="/lib/katex/copy-tex.min.js"></script><script src="/lib/katex/mhchem.min.js"></script><script>window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":200},"comment":{},"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false},"search":{"highlightTag":"em","lunrIndexURL":"/index.json","lunrLanguageCode":"zh","lunrSegmentitURL":"/lib/lunr/lunr.segmentit.js","maxResultLength":100,"noResultsFound":"没有找到结果","snippetLength":50,"type":"lunr"}};</script><script src="/js/theme.min.js"></script></body></html>
